<template>
  <div class="echarts-box" @dblclick="revertMap">
    <div class="my-echarts" ref="map_echarts">783489032my-echarts</div>
  </div>
</template>

<script>
import * as Echarts from 'echarts'
import axios from 'axios'
import mapdata from '@/utils/map/china.json'

import { getProvinceMapInfo} from '@/utils/map/ChineseTransform'

export default {
  name: 'MapEcharts',
  data() {
    return {
      map_type: [{id:'map', label: '地区问题趋势'},{id:'group', label: '公司问题趋势'},{id:'branch', label: '网点问题趋势'}],
      cut_id: 'map',
      show_choice: false,
      title_fontsize: 0,   // 标题文字


      chart_instance: null,
      map_data: {},   // 缓存
      all_data: [
        {
          name: '邮政',
          children: [
            {
              name: '武汉',
              value: [114.31,30.52],
            },
            {
              name: '南京',
              value: [118.76, 32.04],
            },
            {
              name: '重庆',
              value: [106.50, 29.53],
            },
            {
              name: '成都',
              value: [104.06, 30.65],
            },
            {
              name: '广州',
              value: [113.28, 23.12],
            },
          ]
        },
        {
          name: '中通',
          children: [
            {
              name: '大庆',
              value: [125.11, 46.59],
            },
            {
              name: '合肥',
              value: [117.28, 31.86],
            },
            {
              name: '石家庄',
              value: [114.50, 38.045474],
            },
            {
              name: '天津',
              value: [117.19, 39.12],
            },
            {
              name: '海口',
              value: [110.29, 20.00],
            },
          ]
        },
        {
          name: '韵达',
          children: [
            {
              name: '兰州',
              value: [103.82, 36.05],
            },
            {
              name: '南宁',
              value: [	108.32, 22.82],
            },
            {
              name: '昆明',
              value: [102.71, 25.04],
            },
            {
              name: '长春',
              value: [125.32, 43.88],
            },
            {
              name: '济南',
              value: [117.00, 36.67],
            },
          ]
        },
      ],
    }
  },
  mounted() {
    // this.$nextTick(() => {
      
    // })
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    clearInterval(this.timer_id)
    // 在组建销毁时, 销毁监听器
    window.removeEventListener('resize', this.screenAdapter)
  },
  computed: {
    cut_title() {
      if(this.cut_id=='map') return '地区问题趋势'
      else if(this.cut_id=='group') return '公司问题趋势'
      else if(this.cut_id=='branch') return '网点问题趋势'
      else return ''
    },
    // 标题字体大小
    com_style() {
      return {
        fontSize: this.title_fontsize + 'px'
      }
    }
  },
  
  methods: {
    // 切换类型 选项
    handleSelect(key) {
      this.cut_id = key
      this.updateChart()
      this.show_choice = false
    },

    // 初始化
    initChart() {
      this.chart_instance = Echarts.init(this.$refs['map_echarts'], 'dark')
      Echarts.registerMap( 'china', mapdata )
      // axios.get('http://localhost:9527/')
      // 对图表初始化配置的控制
      const initOption = {
        title: {
          text: '▎网点分布',
          left: 20, 
          top: 20,
        },
        
        geo: {
          type: 'map',
          map: 'china',
          top: '5%',
          bottom: '5%',
          itemStyle: {
            // areaColor: 'rgba(5,135,177,0.6)',
            //         borderColor: '#1cccff', 
            //         borderWidth: 1,//隐藏省界线
        		// 	borderColor:"#3FBCCE",
        		//     shadowColor: 'rgba(56,192,255,0.3)',
        		// 	shadowBlur: 50,
            opacity: 1,
            areaColor: '#107FC1',   // #2E72BF
            borderColor: '#84F0F6',   // #333
            borderWidth: '1',
            // borderType: [5, 10],
            // borderDashOffset: 5,
            shadowColor: 'rgba(132,240,246, 0.75)',
            shadowBlur: 10,
            // shadowOffsetX: 10,
            // shadowOffsetY: 11,
            // normal: {
            //   areaColor: {
            //             type: 'radial',
            //             x: 0.5,
            //             y: 0.5,
            //             r: 0.8,
            //             colorStops: [{
            //                 offset: 0,
            //                 color: '#09132c' // 0% 处的颜色
            //             }, {
            //                 offset: 1,
            //                 color: '#274d68'  // 100% 处的颜色
            //             }],
            //             globalCoord: true // 缺省为 false
            //         },
            //   // shadowColor:'rgb(58,115,192)',
              
            // },
          },
        },
        legend: {
          left: '5%',
          bottom: '5%',
          orient: 'vertical'
        }
      }
      const initOption2 = {
        geo: {
          type: 'map',
          map: 'china',
          top: '5%',
          bottom: '5%',
          // zoom: 1.2, 
          itemStyle: {
            areaColor: '#FC1',   // #2E72BF
            borderColor: '#84F0F6',   // #333
            borderWidth: '2',
            // borderType: [5, 10],
            // borderDashOffset: 5,
            // shadowColor:'rgba(inset 0 0 10px 0 origin)',
            shadowColor: 'rgba(132,240,246, 0.75)',
            shadowBlur: 10,
            normal: {
                
                shadowOffsetX: 15,//阴影偏移量
                shadowOffsetY: 15,//阴影偏移量
            },
            // emphasis: {
            //     areaColor: '#2AB8FF',//地区颜色
            //     label: {
            //         show: false,//是否在高亮状态下显示标签
            //     },
            // },

          },
        },
      }
      
      // this.chart_instance.setOption(initOption2)
      this.chart_instance.setOption(initOption)

      // 地图点击事件的监听
      this.chart_instance.on('click', async (arg) => {
        const p_info = getProvinceMapInfo(arg.name)
        console.log(p_info)
        if(!this.map_data[p_info.key]) {
          const res = await axios.get('http://localhost:9527' + p_info.path)
          this.map_data[p_info] = res.data
          Echarts.registerMap(p_info.key, res.data)
        }
        const changeOption = {
          geo: {
            map: p_info.key,
          }
        }
        this.chart_instance.setOption(changeOption)
      })
    },
    // 请求数据
    getData() {
      this.updateChart()
    },
    // 更新图表updateChart--->设置option,柱状图type为bar
    updateChart() {
      // 图利的数据
      let legendArr = this.all_data.map( item => {
        return item.name
      })
      const seriesArr = this.all_data.map( item => {
        // 若想在地图中使用 散点, 需给散点图表配置coordinateSystem: geo
        return {
          type: 'effectScatter',
          rippleEffect: {
            scale: 4,
            brushType: 'stroke'
          },
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo',
        }
      })

      const dataOption = {
        legend: {
          data: legendArr
        },
        series: [
          ...seriesArr
        ],
      }
      this.chart_instance.setOption(dataOption)
    },
    // 浏览器大小发生变化, 完成屏幕适配
    screenAdapter() {
      this.title_fontsize = this.$refs['map_echarts'].offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.title_fontsize
          },
        },
        legend: {
          itemWidth: this.title_fontsize/3,
          itemHeight: this.title_fontsize/3,
          itemGap: this.title_fontsize/3,
          textStyle: {
            fontSize: this.title_fontsize/3
          }
        },
        series: [
          {
          }
        ]
      }
      this.chart_instance.setOption(adapterOption)
      // 手动调用图表对象的resize 才能产生效果
      this.chart_instance.resize()
    },

    // 回到中国地图
    revertMap() {
      const revertOption = {
        geo: {
          map: 'china'
        }
      }
      this.chart_instance.setOption(revertOption)
    }
  },
}
</script>


<style lang="scss">

</style>

<style lang="scss" scoped>
.map-title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
  color: #ffffff;

}
</style>